<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个税汇算清缴计算器</title>
    <link rel="stylesheet" href="./css/layui.css">
    <style type="text/css">
        .layui-form-label {
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
<div class="body">
    <h2 style="text-align: center">个税汇算清缴计算器</h2>
    <form class="layui-form" action="" lay-filter="grsdsjsq">
        <fieldset class="layui-elem-field">
            <legend>累计收入与扣除详情</legend>
            <div class="layui-field-box">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="white-space:pre-wrap">累计收入</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljsr" required lay-verify="required" placeholder="请输入全年收入"
                               autocomplete="off" class="layui-input"/>
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">累计免税收入</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljmssr" placeholder="累计免税收入"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">累计减除费用</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljjcfy" placeholder="请输入全年收入"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="white-space:pre-wrap">累计专项扣除</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljzxkc" placeholder="累计免税收入"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">累计其他扣除</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljqtkc" placeholder="请输入全年收入"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">累计予以扣除的捐赠额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ljyykcdjze" placeholder="累计免税收入"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">元</div>
                </div>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field">
            <legend>税款计算</legend>
            <div class="layui-field-box">
                <div class="layui-form-item">
                    <label class="layui-form-label">累计应纳所得额</label>
                    <div class="layui-input-block">
                        <input type="text" name="ljyykcdjze1" placeholder="累计应纳所得税额"
                               autocomplete="off" class="layui-input" readonly/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">税率</label>
                    <div class="layui-input-block">
                        <input type="text" name="sl" placeholder="税率"
                               autocomplete="off" class="layui-input" readonly/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">速算扣除数</label>
                    <div class="layui-input-block">
                        <input type="text" name="sskcs" placeholder="速算扣除数"
                               autocomplete="off" class="layui-input" readonly/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">累计应纳所得税额</label>
                    <div class="layui-input-block">
                        <input type="text" name="ljynsdse" placeholder="累计应纳所得税额"
                               autocomplete="off" class="layui-input" readonly/>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>所得税扣除情况</legend>
            <div class="layui-field-box">
                <div class="layui-form-item">
                    <label class="layui-form-label">已纳所得税</label>
                    <div class="layui-input-block">
                        <input type="text" name="ynsds" placeholder="已纳所得税"
                               autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field">
            <legend>汇算清缴情况</legend>
            <div class="layui-field-box">
                <div class="layui-form-item">
                    <label class="layui-form-label">补税额度</label>
                    <div class="layui-input-block">
                        <input type="text" name="bsed" placeholder="补税额度"
                               autocomplete="off" class="layui-input" readonly/>
                    </div>
                </div>
            </div>
        </fieldset>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">计算</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="./layui.js"></script>
<script>
    //JS
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;


        /**
         * 表单重置
         */
        $(function () {
            var ljsr = 0,  // 累计收入
                ljmssr = 0, //累计免税收入
                ljjcfy = 12 * 5000, //累计减除费用
                ljzxkc = 0, //累计专项扣除
                ljqtkc = 0,  //累计其他扣除
                ljyykcdjze = 0, //累计予以扣除的捐赠额

                /**
                 * 税款计算
                 */
                ljyykcdjze1 = (ljsr - ljmssr - ljjcfy - ljzxkc - ljqtkc - ljyykcdjze) > 0 ? ljsr - ljmssr - ljjcfy - ljzxkc - ljqtkc - ljyykcdjze : 0;


            var skxx = jsskxx(ljyykcdjze1);


            var sl = skxx["sl"], //税率

                //速算扣除
                sskcs = skxx["sskcs"],

                //应纳税计算
                ljynsdse = skxx["ljynsdse"],

                /**
                 * 所得税扣除情况
                 */
                ynsds = 0,

                /**
                 * 汇算清缴
                 */
                bsed = ljynsdse - ynsds;


            form.val("grsdsjsq", {
                "ljsr": ljsr,
                "ljmssr": ljmssr,
                "ljjcfy": ljjcfy,
                "ljzxkc": ljzxkc,
                "ljqtkc": ljqtkc,
                "ljyykcdjze": ljyykcdjze,
                "ljyykcdjze1": ljyykcdjze1,
                "ljynsdse": ljynsdse,
                "sl": sl,
                "sskcs": sskcs,
                "lsynsdse": ljynsdse,
                "ynsds": ynsds,
                "bsed": bsed

            })
        })


        //监听表单的所有变动
        $("form input").blur(function () {
            var data = form.val("grsdsjsq")
                ,
                ljyykcdjze1 = (data.ljsr - data.ljmssr - data.ljjcfy - data.ljzxkc - data.ljqtkc - data.ljyykcdjze) > 0 ? data.ljsr - data.ljmssr - data.ljjcfy - data.ljzxkc - data.ljqtkc - data.ljyykcdjze : 0
                , skxx = jsskxx(ljyykcdjze1)
                , sl = skxx["sl"]
                , sskcs = skxx["sskcs"]
                , ljynsdse = skxx["ljynsdse"];

            form.val("grsdsjsq", {
                "ljyykcdjze1": ljyykcdjze1,
                "ljynsdse": ljynsdse,
                "sl": sl,
                "sskcs": sskcs,
            })

        })


        //监听提交
        form.on('submit(submit)', function (data) {

            var data1 = data.field;

            /**
             * 这里显示是计算后的信息
             * 只显示收入
             * 累计减除费用
             * 专项扣除
             * 专项扣除附加
             * 应纳税额
             * 个人所得税
             */
            layer.open({
                title: "请确认你的信息",
                content: '<table class="layui-table">\n' +
                    '  <colgroup>\n' +
                    '    <col width="150">\n' +
                    '    <col width="200">\n' +
                    '    <col>\n' +
                    '  </colgroup>\n' +
                    '  <thead>\n' +
                    '    <tr>\n' +
                    '      <th>项目</th>\n' +
                    '      <th>金额</th>\n' +
                    '    </tr> \n' +
                    '  </thead>\n' +
                    '  <tbody>\n' +
                    '    <tr>\n' +
                    '      <td>累计收入</td>\n' +
                    '      <td>' + data1.ljsr + '</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>累计免税收入</td>\n' +
                    '      <td>' + data1.ljmssr + '</td>\n' +
                    '    </tr>\n' +
                    '    <tr>\n' +
                    '      <td>累计减除费用</td>\n' +
                    '      <td>' + data1.ljjcfy + '</td>\n' +
                    '    </tr>\n' +
                    '  </tbody>\n' +
                    '    <tr>\n' +
                    '      <td>累计专项扣除</td>\n' +
                    '      <td>' + data1.ljjcfy + '</td>\n' +
                    '    </tr>\n' +
                    '  </tbody>\n' +
                    '</table>'
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    var jshsqj = jsts(data1.ljynsdse, data1.ynsds);

                    form.val("grsdsjsq", {
                        "bsed": jshsqj
                    });


                    layer.open({
                        title: "汇算清缴详情",
                        content: '<table class="layui-table">\n' +
                            '  <colgroup>\n' +
                            '    <col width="150">\n' +
                            '    <col width="200">\n' +
                            '    <col>\n' +
                            '  </colgroup>\n' +
                            '  <thead>\n' +
                            '    <tr>\n' +
                            '      <th>项目</th>\n' +
                            '      <th>金额</th>\n' +
                            '    </tr> \n' +
                            '  </thead>\n' +
                            '  <tbody>\n' +
                            '    <tr>\n' +
                            '      <td>应该纳税额</td>\n' +
                            '      <td>' + data1.ljynsdse + '</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>累计已纳税额</td>\n' +
                            '      <td>' + data1.ynsds + '</td>\n' +
                            '    </tr>\n' +
                            '    <tr>\n' +
                            '      <td>补税额度</td>\n' +
                            '      <td>' + jshsqj + '</td>\n' +
                            '    </tr>\n' +
                            '  </tbody>\n' +
                            '</table>'
                    })
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , cancel: function () {
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });

            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });

        form.verify({
            income: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[0-9]+(.[0-9]{1,2})?$").test(value)) {
                    return '收入只能为正的两位小数';
                }
            }
        });


    });

    //计算税款信息
    function jsskxx(ljyykcdjze1) {
        var skxx = {sl: 0, sskcs: 0, ljynsdse: 0};

        if (ljyykcdjze1 < 36000) {
            skxx["sl"] = 3;
            skxx["sskcs"] = 0;

        } else if (ljyykcdjze1 >= 36000 && ljyykcdjze1 < 144000) {
            skxx["sl"] = 10;
            skxx["sskcs"] = 2520;
        } else if (ljyykcdjze1 >= 1444000 && ljyykcdjze1 < 300000) {
            skxx["sl"] = 20;
            skxx["sskcs"] = 16920;
        } else if (ljyykcdjze1 >= 300000 && ljyykcdjze1 < 420000) {
            skxx["sl"] = 25;
            skxx["sskcs"] = 31920;
        } else if (ljyykcdjze1 >= 420000 && ljyykcdjze1 < 660000) {
            skxx["sl"] = 30;
            skxx["sskcs"] = 52920;
        } else if (ljyykcdjze1 >= 660000 && ljyykcdjze1 < 960000) {
            skxx["sl"] = 35;
            skxx["sskcs"] = 85920;
        } else if (ljyykcdjze1 >= 960000) {
            skxx["sl"] = 45;
            skxx["sskcs"] = 181920;
        } else {
            layer.open({
                title: '错误'
                , content: '没有匹配的税率信息'
            });

        }
        skxx["ljynsdse"] = ljyykcdjze1 * skxx["sl"] / 100 - skxx["sskcs"];
        return skxx;

    }

    /**
     *
     * 补税计算
     */
    function jsts(ljynsdse, ynsds) {
        return ljynsdse - ynsds;

    }
</script>
</body>
</html>